<template>
	<view>
		<map class="map"></map>
		<form @submit="handleSubmit">
			<view class="cu-form-group margin-top">
				<view class="title">
					<text class="cuIcon-friendaddfill"></text>
				</view>
				<input name="username" value="Daidong" class="text-right" placeholder="请输入姓名" ></input>
			</view>
			<view class="cu-form-group">
				<view class="title">
					<text class="cuIcon-mobilefill"></text>
				</view>
				<input name="phone" value="1999999999" class="text-right" placeholder="请输入电话号码" ></input>
			</view>
			<view class="cu-form-group">
				<view class="title">
					<text class="cuIcon-locationfill"></text>
				</view>
				<picker :range="regionArr" @change="handleRegion">
					<view class="picker">
						{{regionIdx==-1?'请选择区域':regionArr[regionIdx]}}
					</view>
				</picker>
			</view>
			
			<view class="cu-form-group">
				<view class="title">
					<text class="cuIcon-locationfill"></text>
				</view>
				<input name="detail" value="详细地址" class="text-right" placeholder="请输入详细地址" ></input>
				<text class='cuIcon-locationfill text-orange'></text>
			</view>
			<view class="padding">
				<button form-type="submit"  class="cu-btn bg-brown block" >确定</button>
			</view>
		</form>
		
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	export default {
		data() {
			return {
				regionArr:[
					'锦江区',
					'武侯区',
					'成华区',
					'高新区',
					'温江区'
				],
				regionIdx:-1
			};
			
		},
		computed:{
			...mapState({
				userInfo:state=>state.user.userInfo
			})
		},
		methods:{
			handleRegion(e){
				console.log(e);
				let{value}=e.detail
				this.regionIdx=value 
			},
			handleSubmit(e){
				// console.log(e);
				let{value}=e.detail
				let {regionArr,regionIdx}=this
				value.city='成都市'
				value.region=regionArr[regionIdx]
				value.isDefault=false
				value.userId=this.userInfo.objectId
				// console.log(value);
				this.$store.dispatch('address/addressAddAct',value)					
			}
		}
	}
</script>

<style lang="scss">
.map{
	height: 400uxp;
	width: 100%;
}
</style>
